<template>
  <div style="height:100%;width:100%">
    <el-row class="mainContent">
      <el-form status-icon style="width:400px;margin:auto" label-width="100px" class="demo-ruleForm">
        <el-form-item label="公司名称" prop="pass">
          {{initData.company}}
        </el-form-item>
        <el-form-item label="账号" prop="pass">
          {{initData.user}}
        </el-form-item>
        <el-input placeholder="手机号码" :value="initData.tel"></el-input>

        <el-form-item label="常用联系人">

        </el-form-item>
      </el-form>
      <el-col :span="20" style="margin:auto ">
        <el-tag :key="index" v-for="(tag,index) in dynamicTags" closable :disable-transitions="false" @close="handleClose(index)" style='height:auto;margin-bottom:15px;'>

          <div>用户名：{{tag.name}}</div>
          <div>电话：{{tag.tel}}</div>
          <div>微信:{{tag.wchart}}</div>
        </el-tag>
      </el-col>
      <!-- <el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
      </el-input> -->
      
     
      <el-col :span="24" style="margin-top:50px;">
         <el-button class="button-new-tag" size="small" @click="showInput">添加+</el-button>
      </el-col>

    </el-row>

    <el-dialog title="添加员工" :visible.sync="addUsersVisible" width="50%" :close-on-click-modal="false" :close-on-press-escape="false">
      <el-form :model="addForm" ref="addForm" status-icon label-width="100px" class="addcity" :rules="addFormRules" style="text-align:left">
        <el-form-item label="员工姓名" prop="name">
          <el-col :span="18">
            <el-input v-model="addForm.name"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="员工手机号" prop="mobile">
          <el-col :span="18">
            <el-input v-model="addForm.mobile "></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="员工微信号" prop="wchart">
          <el-col :span="18">
            <el-input v-model="addForm.wchart" placeholder='非必传'></el-input>
          </el-col>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="addUsersVisible = false">取 消</el-button>
        <el-button type="primary" @click.native="submitAdd('addForm')" :loading="addLoading">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
        
<script>
export default {
  data() {
    return {
      dynamicTags: {},
      inputVisible: false,
      inputValue: '',
      initData: {
        company: '',
        user: '',
        tel: '',
      },
      addUsersVisible: false,
      addForm: {},
      addLoading: false,
      addFormRules: {},
    };
  },
  created() {
    this.orderList();
  },
  methods: {
    orderList() {
      const _this = this;
      this.$http('/bport/accountDetail', {}).then(resp => {
        _this.dynamicTags = resp.data.employees;
        _this.initData = {
          company: resp.data.organization.company,
          user: resp.data.organization.principal,
          tel: resp.data.organization.tel,
        }
        // console.log(_this.resp)
      })
    },
    handleClose(tag) {
      this.$http('/bport/deleteEmployee', {
        data: {
          id: this.dynamicTags[tag].id,
        }
      }).then(resp => {
        if (resp.code == 1) {
          this.$message({
            message: '新建成功',
            type: 'success'
          })
           this.dynamicTags.splice(tag);
        } else {
          this.$message({
            message: resp.msg,
            type: 'error'
          })
        }
      });

     

    },

    showInput() {
      this.addUsersVisible = true;
     
    },
    submitAdd(fn) {
      this.$refs[fn].validate((valid) => {
        if (valid) {
          this.$http('/bport/addEmployee', {
            data: {
              name: this.addForm.name,
              mobile: this.addForm.mobile,
              wchart: this.addForm.wchart,
            }
          }).then(resp => {
            if (resp.code == 1) {
              this.$message({
                message: '新建成功',
                type: 'success'
              })
            } else {
              this.$message({
                message: resp.msg,
                type: 'error'
              })
            }
            this.orderList()
            this.editLoading = false;
            this.addUsersVisible = false;
          });

        } else {
          return false;
        }
      });
    },
    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.dynamicTags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = '';
    }
  }
}
</script>
        
<style>
.el-tag+.el-tag {
  margin-left: 10px;
}

.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>